<script setup lang="ts">
import bg from 'src/assets/previous-works/ABUIABACGAAgy6zOowYo1PXyoQYwgA84iCc.jpg.webp'
import { useRequest } from 'vue-request'
import { FreeMode, Navigation, Thumbs } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { useMessage } from 'naive-ui'
import { getCancelUpvoteById, getRegisterInfo, getUpvoteById, getWorkById } from '~/api'

import 'swiper/css'

import 'swiper/css/free-mode'
import 'swiper/css/navigation'
import 'swiper/css/thumbs'
import { getAssetUrl } from '~/utils/misc'

const emit = defineEmits<{ (e: 'detail'): void }>()
const message = useMessage()
const route = useRoute()
const router = useRouter()
const modules = [FreeMode, Navigation, Thumbs]

const thumbsSwiper = ref()
function setThumbsSwiper(swiper: any) {
  thumbsSwiper.value = swiper
}
const isGive = ref(false)
const upvoteCount = ref(0)
const { run, data: registerInfo } = useRequest(getRegisterInfo, {
  manual: true,
})

function GetgetUpvoteById(isflag) {
  if (isflag) {
    getCancelUpvoteById(route.params.id).then((res) => {
      isGive.value = false
      upvoteCount.value--
      message.success('点赞取消！')
    })
  }
  else {
    getUpvoteById(route.params.id).then((res) => {
      isGive.value = true
      upvoteCount.value++
      message.success('点赞成功！')
    })
  }
}

const { data, run: runData } = useRequest(getWorkById, {
  defaultParams: [route.params.id as string],
  refreshDeps: [() => route.params.id],
  refreshDepsAction() {
    runData(route.params.id as string)
  },
  onSuccess(data) {
    isGive.value = data.data.isGive
    upvoteCount.value = data.data.upvoteCount
    run(`${data.data.userId}`)
  },
})

const imgs = computed(() => {
  // return [data.value?.data.worksImgMainVo, ...(data.value?.data.worksImgList ?? [])]
  return [ ...(data.value?.data.worksImgList ?? [])]
})

function groupClick(id) {
  router.push({
    path: `/work/${id}`,
  })
  emit('detail')
}

function share() {
  const url = window.location.href
  const oInput = document.createElement('input')
  oInput.value = url // 这里填写需要复制的值
  document.body.appendChild(oInput)
  oInput.select() // 选择对象
  document.execCommand('Copy') // 执行浏览器复制命令
  oInput.className = 'oInput'
  oInput.style.display = 'none'
  message.info('地址已复制')

  document.body.removeChild(oInput)
}
</script>

<template>
  <div bg="no-repeat cover" p="x-10vw y-5vw" :style="{ minHeight: `calc(100vh - var(--app-header-height))`, backgroundImage: `url(${bg})` }">
    <div m="b-30px" text="20px center" font="700">
      {{ data?.data.worksName }}
    </div>
    <Swiper
      :style="{
        '--swiper-navigation-color': '#ccc',
        '--swiper-pagination-color': '#ccc',
      }"
      :space-between="10"
      :navigation="true"
      :thumbs="{
        //  swiper: thumbsSwiper
      }"
      :modules="modules"
      class="mySwiper2"
    >
      <SwiperSlide v-for="item of imgs" :key="item?.id">
        <img
          h-full w-full object-contain
          :src="getAssetUrl(item?.fileUrl ?? '')"
        >
      </SwiperSlide>
    </Swiper>
    <!-- <Swiper
      :style="{ height: '50px' }"
      :space-between="10"
      :slides-per-view="4"
      :free-mode="true"
      :watch-slides-progress="true"
      :modules="modules"
      class="mySwiper"
      @swiper="setThumbsSwiper"
    >
      <SwiperSlide v-for="item of imgs" :key="item?.id">
        <img
          h-full object-contain
          :src="getAssetUrl(item?.fileUrl ?? '')"
        >
      </SwiperSlide>
    </Swiper> -->

    <!-- <div flex="~ gap-4" m="b-47px">
      <n-avatar :src="avatarimg" size="medium" round />
      <div>
        <div text="14px" font="500">
          {{ registerInfo?.data.username }}
        </div>
        <div text="3 opacity-70">
          {{ registerInfo?.data.schoolName }}
        </div>
      </div>
    </div> -->

    <div leading="24px" text="4 #666" m="y-5">
      <div v-html="data?.data.content" />
      <!-- <div v-if="data?.data.awardName">
        【所获奖项】{{ data?.data.awardName }}
      </div>
      <div v-if="registerInfo?.data.memberInfos?.length">
        【团队成员】{{ registerInfo?.data.memberInfos.map(d => d.memberName).join('、') }}
      </div>
      <div v-if="data?.data.studyContent">
        【研究内容】{{ data?.data.studyContent }}
      </div>
      <div v-if="data?.data.worksOriginality">
        【创意理念】{{ data?.data.worksOriginality }}
      </div>
      <div v-if="data?.data.worksIntro">
        【作品简介】{{ data?.data.worksIntro }}
      </div> -->
    </div>
    <div class="flex flex-wrap justify-between">
      <div class="flex flex-wrap" lt-lg="w-full">
        <div lt-lg="w-full" v-if="data?.data.lastWorkId" class="mr-4 text-primary!" style="cursor: pointer;" @click="groupClick(data?.data.lastWorkId)">
          上一组：{{ data?.data.lastWorkName }}
        </div>
        <div lt-lg="w-full" v-if="data?.data.nextWorkId" class="mr-4 text-primary!" style="cursor: pointer;" @click="groupClick(data?.data.nextWorkId)">
          下一组：{{ data?.data.nextWorkName }}
        </div>
      </div>
      <div class="flex">
        <div class="mr-4 items-center text-primary!" flex="~" style="cursor: pointer;" @click="GetgetUpvoteById(isGive)">
          <div :class="isGive ? 'i-carbon-favorite-filled mr-2 inline-block' : 'i-carbon-favorite mr-2 inline-block'" />
          {{ isGive ? '已点赞' : '点赞' }}({{ upvoteCount }})
        </div>
        <div class="text-primary!" style="cursor: pointer;" @click="share">
          分享
        </div>
      </div>
    </div>
    <!-- <div flex="~ col gap-4">
      <div v-for="item of data?.data.worksImgList" :key="item.id">
        <n-image
          lazy
          width="1000"
          :src="item.fileUrl"
        />
      </div>
    </div> -->
  </div>
</template>

<style scoped>
.mySwiper2 {
  /* height: 700px; */
  .swiper-slide {
    @apply text-center bg-white;
  }
}
.mySwiper {
  height: 90px;

}
</style>

<route lang="yaml">
meta:
  layout: detail
  </route>
